<template>
    <div class="tooler">
        <div class="tooler-insert">

            <template v-if="activePiece.type == 2">
                <button @click="addDst()">
                    <svg-icon name="design-add" />
                    <span>Add Embroidery</span>
                </button>
            </template>
            <template v-else>
                <button @click="addImage()" :disabled="isNecklabel && necklabelInfo.active > 0">
                    <svg-icon name="design-add" />
                    <span>Add image</span>
                </button>
                <button @click="addText()" :disabled="isNecklabel && necklabelInfo.active > 0">
                    <svg-icon name="design-add" />
                    <span>Add text</span>
                </button>
            </template>

        </div>

        <!-- 领标头部 -->
        <div class="tooler-necklabel-title" v-if="isNecklabel && !necklabel_loading">

            <div class="tooler-necklabel-nodata" v-if="necklabel_list.length == 0" @click="necklabel_dialog = true"
                 title="Create your custom neck label">
                <img src="https://img.podpartner.com/static/images-20230202/brand/necklabel-icon.png" alt="" />
                <strong>Create your custom neck label</strong>
            </div>

            <div class="tooler-necklabel-choose" v-else-if="necklabelInfo.active > 0 || layers.length == 0">
                <span>Choose a brand neck label</span>
            </div>
        </div>



        <!-- 领标内容 -->
        <div class="tooler-necklabel-list"
             v-if="isNecklabel && (necklabelInfo.active > 0 || layers.length == 0) && (necklabel_list.length > 0 || necklabel_loading)">
            <ul>
                <li v-for="item in necklabel_list" :key="item.id"
                    :class="{ active: necklabelInfo.active && item.id == necklabelInfo.active }">
                    <h3 @click="setNecklabel(item)">
                        <svg-icon name="checkbox-active" />
                        <strong v-text="item.title"></strong>
                    </h3>
                    <figure>
                        <span><img v-lazy="$getLitimgUrl(item.dark.output_img, 'medium')" alt="" /></span>
                    </figure>
                    <figure>
                        <span><img v-lazy="$getLitimgUrl(item.light.output_img, 'medium')" alt="" /></span>
                    </figure>
                </li>
            </ul>
            <UxLoading v-if="necklabel_loading" />
        </div>


        <!-- 空状态 -->
        <div class="tooler-nodata" v-else-if="!layers || layers.length == 0">
            <div class="tooler-nodata-warp" v-if="activePiece.type == 2">
                <img src="@/assets/images/designer/designer-emb-empty.png" alt="">
                <h2>Embroidery file requirements</h2>
                <div class="tooler-nodata-tip">
                    •
                    <ProductEmbDstTip /> format files <br>• Text
                </div>
                <!-- <p>• <a @click="addDst()">.dst </a> format files <br>• Text</p> -->

            </div>
            <div class="tooler-nodata-warp" v-else>
                <img src="@/assets/images/designer/designer-dtg-empty.png" alt="">
                <h2>Print file requirements</h2>
                <p>• JPG or PNG format <br>• Max 50 MB</p>
            </div>
        </div>


        <template v-else>

            <DesignerToolerPanelEmb v-if="activePiece && activePiece.type == 2 && (activeLayer || lastActiveLayer)"
                                    :activeLayer="activeLayer || lastActiveLayer" />

            <!-- 图层列表 -->
            <div class="tooler-list">
                <draggable v-model="layerReverse" @start="dragStart()" @end="dragEnd()" v-bind="dragOptions">
                    <transition-group type="transition">
                        <component v-for="item in layerReverse" :key="item.id" :is="item.component" :dst="item.dst"
                                   :layer="item.layer" :piece="activePiece">
                            <button @click.stop="copyLayer(item)" class="iconfont icon-fuzhi"
                                    v-show="item.layer.customize ? copyAble : true"></button>
                            <button @click.stop="removeLayer(item)" class="iconfont icon-liebiao-shanchu"></button>
                            <!-- <button class="iconfont icon-liebiaotuodong handle"></button> -->
                        </component>
                    </transition-group>
                </draggable>
            </div>
        </template>

        <!-- 品牌弹窗 -->
        <DesignerToolerPanelNecklabel v-model="necklabel_dialog" />

        <!-- 自定义弹窗 -->
        <DesignerToolerPanelCustomize />

    </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import draggable from "vuedraggable";
import DesignResource from "@/utils/DesignResource.js";
export default {
    components: {
        draggable: draggable,
    },
    data () {
        return {
            cache: null,
            drag: true,
            media: false,

            necklabel_dialog: false,
            fonts_loaded: false,
            dragOptions: {
                animation: 200,
                handle: ".handle",
                axis: "y",
                // group: "description",
                disabled: false,
                // ghostClass: "ghost",
                direction: "horizontal", // 拖拽方向 (默认情况下会自动判断方向)
            },
        };
    },
    computed: {
        ...mapGetters({
            logined: "getIsLogin",
        }),
        ...mapState('designer', {
            necklabelInfo: "necklabelInfo",
        }),
        ...mapGetters("designer", {
            activePiece: "getActivePiece",
            pieces: "getPieces",
            layers: "getActivePieceLayers",
            activeLayer: "getActiveLayer",
            lastActiveLayer: 'getLastActiveLayer',
            activeDst: "getActiveDst",
            activeColor: "getActiveColor",
            platens: "getPlatens",
        }),
        // 是否是领标
        isNecklabel () {
            const activePiece = this.activePiece || { canvas_name: "" };
            return activePiece.canvas_name == "Neck Label Inner";
        },

        copyAble () {
            const count = this.pieces.reduce((pre, cur) => pre + cur.layers.filter(i => i.customize).length, 0)
            return count < 3;
        },

        platenActive () {
            const layer = this.activeLayer || {}
            return this.platens.find(i => i.code == layer.platens_id) || {}
        },


        // 倒序
        layerReverse: {
            get () {

                let name = new Map([
                    ['image', 'DesignerImageAttribute'],
                    ['text', 'DesignerTextAttribute'],
                    ['emb', 'DesignerEmbAttribute'],
                ])

                if (this.activePiece && this.activePiece.type == 2) {
                    // 刺绣
                    const layer = this.activeLayer || this.lastActiveLayer || {}
                    const dsts = layer.dists || []

                    const result = dsts.map(dst => ({
                        id: dst.id,
                        component: name.get('emb'),
                        layer: layer,
                        dst: dst,
                    }))

                    result.reverse();
                    return result.filter(i => i.component)

                } else {
                    // dtg
                    const layers = this.layers || [];
                    const result = layers.map(layer => ({
                        id: layer.id,
                        component: name.get(layer.type),
                        layer: layer,
                    }))

                    result.reverse();
                    return result.filter(i => i.component)
                }


                // let layers = (this.layers || []).slice(0);
                // console.log(layers);
                // return layers.map(layer => {
                //     return {
                //         id: layer.id,
                //         component: name.get(layer.type),
                //         layer: layer,
                //     }
                // })
            },
            set (list) {


                if (this.activePiece && this.activePiece.type == 2) {
                    // 刺绣
                    let layer = (list[0] || {}).layer
                    let copy = list.slice(0).reverse();
                    let dists = copy.map(item => item.dst)
                    layer.dists.splice(0, layer.dists.length, ...dists);


                } else {
                    let copy = list.slice(0).reverse();
                    let layers = copy.map(item => item.layer)
                    this.$store.commit("designer/SET_LAYERS", layers);
                }
            },
        },

        necklabel_loading () {
            return (this.necklabelInfo || {}).loading
        },
        necklabel_inited () {
            return (this.necklabelInfo || {}).inited
        },
        necklabel_list () {
            return (this.necklabelInfo || {}).list || []
        },
    },
    watch: {
        activePiece (newval, oldval) {
            const activePiece = this.activePiece;
            if (!activePiece) {
                // return false;
            } else if (activePiece.canvas_name != "Neck Label Inner") {
                // 不是领标
            } else if (!this.logined) {
                // 未登录
            } else if (this.necklabel_inited || this.necklabel_loading) {
                // 已经加载，或是正在加载
            } else {
                // this.getNecklabel();
                this.$store.dispatch('designer/getNecklabelList')
            }
        },
    },
    methods: {
        // 复制图层
        copyLayer (item) {
            if (this.activePiece.type == 2) {
                // 刺绣，删除
                this.$emit('global:DESIGN_COPY_DST', { layer: item.layer, dst: item.dst });
            } else {
                this.$emit("global:DESIGN_COPY_LAYER", item.layer);
            }
        },

        // 删除图层
        removeLayer (item) {
            if (this.activePiece.type == 2) {
                // 刺绣，删除
                this.$emit('global:DESIGN_REMOVE_DST', item);
            } else {
                this.$emit("global:DESIGN_REMOVE_LAYER", item.layer);
            }

        },


        // 设置领标
        setNecklabel (item) {
            if (this.necklabelInfo && this.necklabelInfo.active == item.id) {
                // 清空
                this.$store.commit("designer/SET_NECKLABEL_ACTIVE", null);
                // } else if ((this.activeColor || {}).is_white) {
                // 颜色
                // this.$store.commit("designer/SET_NECKLABEL_ACTIVE", item.light);
            } else {
                // 深色
                this.$store.commit("designer/SET_NECKLABEL_ACTIVE", item);
            }

        },


        // 拖动开始前
        dragStart () {
            this.drag = true;
            this.cache = this.activeLayer;
        },

        // 拖动结束
        dragEnd () {
            this.drag = false;
            if (this.activeLayer != this.cache) {
                this.$store.commit("designer/SET_ACTIVE_LAYER", this.cache);
            }
        },
        // 插入文字
        addText () {
            if (!this.fonts_loaded) {
                DesignResource.loadAllFont();
                this.fonts_loaded = true;
            }
            this.$emit("global:DESIGN_INSERT_TEXT");
        },

        // 添加图片
        addImage () {
            this.$emit('global:DESIGN_OPEN_MEDIA')
        },

        // 添加版带
        addDst () {
            const layer = (!this.layers || this.layers.length == 0) ? '' : this.activeLayer || this.lastActiveLayer;
            this.$emit('global:DESIGN_OPEN_EMB_DST', layer)
        },

        // 滚动到指定位置
        scrollToActive () {
            const warp = this.$el.querySelector('.tooler-list')
            const item = warp ? warp.querySelector('.layer.active') : null;

            if (item) {
                const warp_rect = warp.getBoundingClientRect()
                const item_rect = item.getBoundingClientRect()
                const top = item_rect.top - warp_rect.top + warp.scrollTop;

                warp.scrollTop = top
            }

        }
    },

    created () {
        this.$on('global:DESIGN_SCROLL_TO_LAYER', this.scrollToActive)

    },
};
</script>
<style lang="scss" scoped>
.tooler {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
}

.tooler-insert {
    height: 40px;
    padding: 12px 9px;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;

    &::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        height: 1px;
        background-color: #e6e6e6;
    }

    i {
        display: inline-block;
        vertical-align: top;
        margin-right: 4px;
        font-size: 20px;
    }

    button {
        flex: 1;
        height: 40px;
        border-radius: 6px;
        margin: 0 3px;
        border: 1px solid #707070;
        white-space: nowrap;
        text-align: center;
        font-size: 0;
        padding: 0 4px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-items: center;

        &>svg {
            width: 12px;
            height: 12px;
            margin-right: 4px;
        }

        &>span {
            vertical-align: top;
            display: inline-block;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            font-size: 16px;
            color: #000000;
        }

        &:hover {
            span {
                color: #ea4c89;
            }

            svg {
                color: #ea4c89;
            }
        }

        // 禁用
        &[disabled],
        &.disabled {
            background: #f6f6f6;
            border-color: #e0e0e0;
            color: #919191;
            cursor: default;

            &>svg {
                fill: #9e9e9e;
            }

            &>span {
                color: #9e9e9e;
            }

            &:hover {
                background: #f6f6f6;
            }
        }
    }
}

.tooler-nodata-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tooler-nodata {
    flex: 1;
    position: relative;
    display: flex;
    overflow: auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px 45px 20px;
    box-sizing: border-box;

    .tooler-nodata-warp {
        text-align: center;
    }

    img {
        width: 96px;
        height: 68px;
    }

    h2 {
        margin-top: 18px;
        font-family: Roboto-Medium;
        font-weight: 500;
        font-size: 16px;
        color: #555555;
        line-height: 22px;
        text-align: left;
    }

    .tooler-nodata-tip,
    p {
        margin-top: 4px;
        font-family: Roboto, Roboto;
        font-weight: 400;
        font-size: 14px;
        color: #555555;
        line-height: 22px;
        text-align: left;
    }

    a {
        text-decoration: underline;
        cursor: pointer;
        font-style: italic;

        &:hover {
            color: #000;
        }
    }
}

.tooler-necklabel {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    position: relative;
}

.tooler-necklabel-title {
    position: relative;
    overflow: hidden;

    &::before {
        // content: "";
        // position: absolute;
        // left: 0;
        // bottom: 0;
        // right: 0;
        // height: 1px;
        // background-color: #ebebeb;
    }
}

.tooler-necklabel-nodata {
    position: relative;
    margin: 20px auto 8px;
    width: 248px;
    box-sizing: border-box;
    height: 40px;
    line-height: 40px;
    background: #000000;
    border-radius: 6px;
    cursor: pointer;
    padding: 0 12px;
    font-size: 14px;
    font-family: Roboto-Medium, Roboto;
    font-weight: 500;
    color: #ffffff;

    display: flex;
    justify-content: center;
    align-items: center;

    &:hover {
        background: #595959;
    }

    img {
        background: transparent;
        vertical-align: top;
        width: 24px;
        height: 24px;
    }

    strong {
        font-weight: inherit;
        margin-left: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.tooler-necklabel-choose {
    display: block;
    height: 52px;
    line-height: 52px;
    text-align: center;
    font-size: 18px;
    font-family: Roboto-Medium, Roboto;
    font-weight: 500;
    color: #000000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: -20px;
}

.tooler-necklabel-list {
    flex: 1;
    position: relative;
    overflow: auto;
    padding-bottom: 20px;

    li {
        display: flex;
        position: relative;
        font-size: 14px;
        color: #000000;
        line-height: 50px;
        padding: 54px 12px 0px;
        user-select: none;

        h3 {
            position: absolute;
            top: 24px;
            left: 20px;
            right: 20px;
            height: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;

            &>svg {
                width: 18px;
                height: 18px;
                padding: 0;
                fill: #fff;
                box-sizing: border-box;
                padding: 4px;
                border-radius: 12px;
                background: #d1d1d1;
            }

            strong {
                margin-left: 4px;
                font-size: 14px;
                font-family: Roboto-Regular, Roboto;
                font-weight: 400;
                color: #555555;
                line-height: 18px;
            }
        }

        figure {
            flex: 1;
            margin: 0 8px;
            position: relative;
            border-radius: 4px;
            border: 2px solid #000;
            box-sizing: border-box;
            overflow: hidden;

            &::before {
                content: "";
                display: block;
                padding-bottom: 100%;
                background: #000;
            }

            span {
                position: absolute;
                left: 10px;
                top: 10px;
                right: 10px;
                bottom: 10px;
                border: 1px dashed #686666;
            }

            img {
                width: 100%;
                height: 100%;
            }

            &+figure {
                border: 1px solid #dcdcdc;

                &::before {
                    background: #ffffff;
                }

                span {
                    border-color: #bdbdbd;
                }
            }
        }

        &.active {
            h3>svg {
                background: #ea4c89;
            }

            figure.active {
                border-color: #ea4c89;
            }

            strong {
                color: #ea4c89;
            }
        }
    }
}

.tooler-list {
    flex: 1;
    padding-bottom: 16px;
    overflow-y: auto;

    &::-webkit-scrollbar {
        width: 0px;
    }

    &::v-deep .layer {
        margin: 12px 12px 0;
        position: relative;
        border-radius: 6px;
        background: #ffffff;
        border: 1px solid #c6c6c6;
        overflow: hidden;

        .handle {
            cursor: ns-resize;
        }

        &.layer-image .layer-info figure {
            border: 1px solid #d9d9d9;
            background: rgba(0, 0, 0, 0.02);
            box-sizing: border-box;
        }

        .layer-info {
            display: flex;
            position: relative;
            height: 60px;
            line-height: 60px;
            align-items: center;
            cursor: pointer;
            border-radius: 6px 6px 0 0;

            .handle {
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
            }

            figure {
                margin-left: 10px;
                width: 40px;
                height: 40px;
                position: relative;
                overflow: hidden;
                border-radius: 4px;

                img {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    text-indent: -999em;
                }

                i.iconfont {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    width: 50px;
                    height: 50px;
                    text-align: center;
                    line-height: 50px;
                    font-size: 40px;
                    font-weight: normal;
                }
            }

            // h2{
            // 	position: relative;
            // 	margin-left: 12px;
            // 	margin-right: 12px;
            // 					}

            h2 {
                position: relative;
                flex: 1;
                display: flex;
                flex-direction: column;
                padding: 0 6px;
                line-height: 40px;
                user-select: none;
                white-space: nowrap;
                overflow: hidden;
                pointer-events: none;
                font-size: 18px;
                font-weight: bold;
                color: #000;
                font-weight: normal;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;

                strong {
                    display: block;
                    height: 20px;
                    font-size: 14px;
                    font-weight: bold;
                    color: #000000;
                    line-height: 20px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-weight: normal;
                }

                span {
                    display: block;
                    height: 20px;
                    line-height: 20px;
                    font-size: 14px;
                    font-weight: bold;
                    color: #555555;
                    font-weight: normal;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }

            .layer-info-button {
                display: flex;
                margin-right: 10px;

                button {
                    position: relative;
                    margin: 0 6px;
                    padding: 0;
                    border: none;
                    background: none;
                    width: 24px;
                    height: 24px;
                    font-size: 20px;
                    font-weight: normal;
                    color: #666;

                    &:hover {
                        color: #ea4c89;
                    }
                }
            }

            &:hover {
                background-color: #f6f6f6;
            }
        }

        .layer-factor {
            display: none;
            padding-bottom: 12px;
            margin-top: -10px;
        }

        .factor-text {
            display: block;
            margin: 16px 10px 0;

            input {
                width: 100%;
                height: 32px;
                background: #ffffff;
                border-radius: 4px;
                border: 1px solid #e6e6e6;
                box-sizing: border-box;
                padding: 6px 12px 6px 12px;
                font-size: 14px;
                color: #000000;

                &:hover {
                    border-color: #c7c7c7;
                }

                &:focus {
                    border-color: #f6b2cd;
                    box-shadow: 0 0 1px 1px #f6b2cd;
                }
            }
        }

        .factor-color {
            display: flex;
            // flex-wrap: wrap;
            padding: 0 10px;
            align-items: flex-end;
            margin-left: -4px;

            .factor-color-family {
                width: 115px;
                margin: 0 4px;
                display: flex;
                flex-direction: column;

                &>span {
                    white-space: nowrap;
                    height: 14px;
                    font-size: 12px;
                    color: #666;
                    line-height: 14px;
                    text-align: left;
                    margin-bottom: 4px;
                }

                .el-select .el-input {
                    input {
                        height: 32px;
                        line-height: 32px;
                        background: #ffffff;
                        border-radius: 4px;
                        border: 1px solid #e6e6e6;
                        box-sizing: border-box;
                        padding: 6px 20px 6px 12px;
                        font-size: 14px;
                        color: #000000;
                        box-shadow: none;
                    }

                    .el-input__suffix {
                        right: 0;
                        width: 20px;
                    }

                    .el-input__icon {
                        width: 100%;
                        text-align: center;
                        line-height: 32px;
                        font-family: "iconfont" !important;
                        font-size: 12px;
                        font-style: normal;
                        -webkit-font-smoothing: antialiased;
                        color: #575757;

                        &::before {
                            content: "\e650";
                        }
                    }


                    &:hover {
                        input {
                            border-color: #c7c7c7;
                        }

                        .el-input__icon {
                            color: #575757;
                        }
                    }

                    &.is-focus {
                        input {
                            border-color: #f6b2cd;
                            box-shadow: 0 0 1px 1px #f6b2cd;
                        }

                        .el-input__icon {
                            color: #575757;
                        }
                    }
                }
            }

            .factor-color-flex {
                display: flex;
                flex: 1;
                justify-content: space-between;
                margin-right: -4px;

                &>* {
                    flex: 1;
                    margin: 14px 4px 0;

                    .input-color {
                        padding-top: 18px;

                        &>span {
                            position: absolute;
                            left: 50%;
                            top: 0;
                            transform: translateX(-50%);
                        }

                        &>button {
                            width: 44px;
                        }
                    }
                }
            }
        }

        .factor-input {
            display: flex;
            flex-wrap: wrap;
            padding: 0 8px;

            &>.input-number {
                margin-top: 16px;
                width: 50%;
                padding: 0 4px;
                box-sizing: border-box;
            }
        }

        .factor-slider {
            padding: 18px 20px 0;

            .input-slider {
                margin-top: 6px;
            }
        }

        .factor-align {
            margin-top: 16px;
            padding: 0 10px;
            display: flex;
            justify-content: space-between;

            button {
                width: 32px;
                height: 32px;
                text-align: center;
                background: none;
                border: none;
                font-size: 22px;
                color: #666;
                position: relative;

                &:nth-child(3) {
                    margin-right: 4px;
                }

                svg {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    width: 24px;
                    height: 24px;
                    color: #555;
                }

                &:hover {
                    svg {
                        color: #ea4c89;
                    }
                }
            }
        }

        .factor-flip {
            margin: 10px 0 16px;
            padding: 0 10px;
            display: flex;
            justify-content: space-between;

            button {
                width: 32px;
                height: 32px;
                text-align: center;
                background: none;
                border: none;
                font-size: 22px;
                color: #666;
                position: relative;

                &:nth-child(3) {
                    margin-right: 4px;
                }

                svg {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    width: 24px;
                    height: 24px;
                    color: #555;
                }

                &.active,
                &:hover {
                    svg {
                        color: #ea4c89;
                    }
                }
            }
        }

        &:hover {
            border-color: #999;
        }

        &.notify {
            border-color: rgb(244, 67, 54);
        }

        &.active {
            &:before {
                border-color: #999;
            }

            .layer-info {

                // background: #f7f7f7;
                label:before {
                    display: block;
                }

                input {
                    text-indent: 12px;
                    pointer-events: all;
                }
            }

            .layer-factor {
                display: block;
            }

            &.layer-customize {

                // background: #000;
                .customize-name {}

                .layer-content {
                    border-radius: 0 0 6px 6px;
                    background: #fff;

                    .layer-info {
                        border-radius: 0;
                    }
                }

                &::before {
                    box-shadow: 0 0 0 2px #000;
                }
            }
        }
    }
}

@media screen and (max-width: 1440px) {
    .tooler-nodata .nodata-notify {
        h2 {
            font-size: 12px;
        }

        p {
            font-size: 12px;
        }
    }
}
</style>
